<template>
  <view>

    <!-- #ifdef APP-PLUS || MP-WEIXIN -->
    <u-navbar :immersive="true" back-icon-color="#000" :is-back="true" title-color="#000" title="登录"
              :background="{ background:'transparent'}" :border-bottom="false"></u-navbar>
    <!-- #endif -->

<!--    <image class="logon_page_bg" :src="BestImgUrl + '/login/login_bg.png'" mode="widthFix"></image>-->
    <view class="logo_wenan">
      <image class="" src="/static/logo.png" mode="widthFix"></image>
    </view>

    <view class="logo_bottom_box">
      <view class="lijipay">
        <!--微信授权登录v-if="!isAuthorized"-->
        <!--<button open-type="getUserInfo" @getuserinfo="onGetUserInfo">微信登录</button>-->
        <u-button  type="info" shape="circle" :ripple="false" :loading="Payloading" @click="onGetUserInfo()">
          <u-icon name="weixin-fill" color="#fff" size="42"></u-icon>
          微信登录
        </u-button>

        <view style="margin-top: 20rpx"></view>
<!--        <u-button type="info" shape="circle" :ripple="false" :loading="phoneLogin" @click="phoneAppLogin()">-->
<!--          <u-icon name="phone" color="#fff" size="42"></u-icon>-->
<!--          账号登录-->
<!--        </u-button>-->
      </view>
      <view class="other_box">
        <view class="protocol_wrap">
          <view class="protocol">
            <view class="tagstishi" v-if="check_on == !1 && Lowcheck_on == 1">
              <view class="tagstishi_box">
                <view>请阅读并勾选协议</view>
                <span></span>
              </view>
            </view>
            <view class="dianji">
              <u-checkbox v-model="check_on" shape="circle" size="32" active-color="#FF7900" @change="check_icon">
                <view style="font-size: 24rpx;">登录代表您已同意《<span @click.stop="yhxy">用户协议</span>》和《<span @click.stop="ysxy">隐私政策</span>》
                </view>
              </u-checkbox>
              <!--<image @tap="check_icon()" v-if="check_on == !1" class="check_icon"
                     src="/static/images/choose_1.png"></image>
              <image @tap="check_icon()" v-else class="check_icon" src="/static/images/choose_2.png">
              </image>-->
            </view>

          </view>
          <!--<view class="dingyue">
            <u-checkbox-group>
              <u-checkbox @change="dingyueFun"  v-model="dingyue" name="dingyue" shape="circle" active-color="#FF7900">我同意订阅消息推送</u-checkbox>
            </u-checkbox-group>
          </view>-->
        </view>
      </view>
    </view>

    <!--弹窗-->
    <u-popup v-model="xieyiShow" mode="center" width="524" border-radius="20" :mask-close-able="false">
      <view class="tc_wrap_logon">
        <view class="tc_info">
          <view>温馨提示</view>
          <view>请您仔细阅读并充分理解相关条款，点击同意即代表您已阅读并同意<span
              @click.stop="yhxy">《用户协议》</span>和<span
              @click.stop="ysxy">《隐私政策》</span></view>
        </view>
        <view class="tc_btn_box">
          <view class="tc_btn_huise" @click="xieyiShow = false">不同意</view>
          <view class="lijipay">
            <u-button hover-class="none" type="info" shape="circle" :ripple="false"
                      @click="MyOkxy()">我同意
            </u-button>
          </view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import { subscribeMessage, subscribeType } from '@/public/requestSubscribeMessage'
const app = getApp();
export default {
  data() {
    return {
      xieyiShow: false,
      Payloading: false,
      phoneLogin: false,
      check_on: !1,
      Lowcheck_on: 0,
      BestImgUrl: app.globalData.imgurl,
      phoneNum: '',
      access_token: '',
      openid: '',
      // TODO
      pwd: '369852741',
      phone: '17785819621',
      welfareGroup: '', //福利群进入登录变量
      dingyue: false,
      isSubscribeType: false,//
      // 模板ID
      sendMsgId:[
        'dKvuqkxzN6puZ1S8cnpHwKDQrIHHr5eB-w_kDqk-a9o',//——订单取消通知
        'Ek7fbenJbYz7CKy6C-bKHpZ7v3_LINp5k7fWGo3qM84', //——退款成功通知
        'yH70jw6bKOjhpxGu-QEd-9i7s-6KTf3G4UJPJ3K9N9k', //——购买成功通知
      ],
      userinfo: {},
    }
  },
  onLoad(options) {
    // 页面加载时检查授权状态
    this.checkAuth()
    /*this.welfareGroup = options.welfareGroup
    if (this.welfareGroup){
      uni.switchTab({
        url: '/pages/index/index'
      })
    }*/
  },
  onShow() {

  },
  methods: {
    MyOkxy() {
      let that = this
      that.check_on = !0
      that.xieyiShow = false
      that.wxminiAppLogon()
    },
    yhxy() {
      uni.navigateTo({
        url: '/subpackageA/pages/yhxy'
      })
    },
    ysxy() {
      uni.navigateTo({
        url: '/subpackageA/pages/yszc'
      })
    },
    check_icon() {
      if (this.check_on == !0) {
        this.check_on = !1
        this.Lowcheck_on = 1
      } else {
        this.check_on = !0
        this.Lowcheck_on = 0
      }
    },
    // TODO 添加手机号登录
    phoneAppLogin(){
      let that = this
      if(that.phoneLogin){
        uni.setStorageSync('token', "res.data.result.token");
        that.GetUserInfo()
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }
    },
    // 检查用户是否已授权
    checkAuth() {
      uni.getSetting({
        success: (res) => {
          console.log('用户授权状态=', res)
          if (res.authSetting['scope.userInfo']) {
            this.isAuthorized = true;
            // 已授权，直接获取用户信息
            // this.getUserInfo();
          } else {
            this.isAuthorized = false;
          }
        },
      });
    },
    // 授权登录事件
    onGetUserInfo(e) {
      wx.getUserProfile({
        desc: '获取用户授权', // 声明获取用户个人信息后的用途
        success: (res) => {
          console.log('用户信息==:', this.userinfo);
          if (res.userInfo){
            this.userinfo = res.userInfo
            // 缓存用户信息
            uni.setStorageSync('userinfo', res.userInfo)
            this.wxminiAppLogon();
          }else {
            uni.showModal({
              title: '警告',
              content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
              showCancel: false,
              confirmText: '返回授权',
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击了“返回授权”');
                }
              }
            });
          }
        }
      });
      /* console.log('授权登录事件', e.detail.userInfo)
      if (e.detail.userInfo) {
        // 用户点击了“允许”授权
        this.userInfo = e.detail.userInfo;
        // 缓存用户信息
        uni.setStorageSync('userinfo', e.detail.userInfo)
        this.wxminiAppLogon();
      } else {
        // 用户拒绝授权
        uni.showModal({
          title: '警告',
          content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
          showCancel: false,
          confirmText: '返回授权',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击了“返回授权”');
            }
          }
        });
      } */
    },
    // 获取用户信息
    wxminiAppLogon() {
      let that = this
      if (that.check_on == !1) {
        that.xieyiShow = true
      } else {
        that.xieyiShow = false
        that.Payloading = true
        uni.login({
          provider: 'weixin',
          success: function (login_res) {
            console.log('获取小程序code', login_res.code);
            that.$api.wxminiappLogon({
              code: login_res.code, //	是	string	登录授权code
              avatar: that.userinfo ? that.userinfo.avatarUrl : that.BestImgUrl + '/home_logo.png', //	是	string	用户头像
              nickname: that.userinfo ? that.userinfo.nickName : '领食惠探店用户', //	是	string	用户昵称
              username: that.phoneNum, //绑定的手机号，手机号一键登录提示未注册时，
              appid: uni.getStorageSync('miniProgramAppId')
            }).then(res => {
              that.Payloading = false
              console.log('微信小程序登录', res)

              uni.setStorageSync('token', res.data.result.token);
              that.GetUserInfo()
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }).catch(err => {
              console.log('获取小程序err', err);
              that.Payloading = false
              uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              });
            });

          },
          fail: function (err) {
            that.Payloading = false
          }
        });
      }
    },

    //订阅消息选中
    dingyueFun(e) {
      let that = this
      subscribeMessage(that.sendMsgId)

    },
    GetUserInfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        console.log('获取用户信息', res)
        uni.setStorageSync('userinfo', res.data.result)
      }).catch(err => {
      });
    },
  },

}
</script>

<style lang="scss">
page{
  background: linear-gradient(to bottom, #fdf6cc, 50%, #fdfdfc);
}
.logon_page_bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

.logo_wenan {
  position: fixed;
  /* #ifdef APP-PLUS || MP-WEIXIN */
  top: 418rpx;
  /* #endif */
  /* #ifdef H5 */
  top: 15%;
  /* #endif */
  left: 50rpx;

  image {
    width: 650rpx;
    height: 360rpx;
  }
}

.logo_bottom_box {
  position: fixed;
  /* #ifdef APP-PLUS */
  bottom: 2%;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  bottom: 2%;
  /* #endif */
  /* #ifdef H5 */
  bottom: 0%;
  /* #endif */
  width: 100%;
  padding: 0 40rpx;
}

.lijipay {
  width: 100%;
  position: relative;

  .u-icon {
    margin-right: 10rpx;
  }

  .u-size-default {
    height: 96rpx !important;
    line-height: 96rpx !important;
    background-image: linear-gradient(to right, #fd7800, #fd7800) !important;
    color: #fff;
  }
}

.other_box {
  margin-top: 30rpx;
  //text-align: center;

  .logon_type {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .logon_type_item {
      text-align: center;
      margin: 0 20rpx;

      .apple_login {
        text-align: center;

        image {
          width: 88rpx;
          height: 88rpx;
          border-radius: 200rpx;
        }
      }

      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 200rpx;
      }
    }
  }

  .protocol_wrap {
    justify-content: center;

    .protocol {
      position: relative;
      //width: 100%;
      margin: 60rpx auto 0;
      color: #999;
      padding: 0 0 10px 0;
      margin-bottom: 10px;
      display: flex;
      align-items: flex-start;
      font-size: 24rpx;

      .tagstishi {
        position: absolute;
        top: -74rpx;
        left: -14px;

        .tagstishi_box {
          background-color: #000;
          position: relative;
          padding: 10rpx;
          border-radius: 10rpx;
          color: #fff;

          span {
            transform: rotate(45deg);
            display: inline-block;
            width: 20rpx;
            height: 20rpx;
            background-color: #000;
            position: absolute;
            bottom: -5px;
            left: 18px;
            color: #fff;
          }
        }
      }

    }

    .protocol span {
      color: #FF7900;
    }

    .check_icon {
      width: 34rpx;
      height: 34rpx;
      position: relative;
      top: 0;
      margin-right: 7rpx;
    }
  }
}
</style>